<template>
<!--搜索信息-->
  <el-row style="margin-top: 20px">
    <el-form :inline="true" :model="searchInfo" :rules="rules" ref="searchInfo">
      <el-form-item prop="info">
         <el-input prefix-icon="el-icon-search" v-model="searchInfo.info" placeholder="请输入要搜索的标题" ></el-input>
      </el-form-item>
      <el-form-item  prop="searchType">
        <el-select filterable v-model="searchInfo.searchType" placeholder="请选择">
          <el-option v-for="i in types" :key="i.id" :label="i.name" :value="i.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain icon="el-icon-search" @click="search('searchInfo')"></el-button>
      </el-form-item>
    </el-form>
    <el-col :sm={span:2,offset:4}>
      <el-button type="success" @click="addPage">
        添加
      </el-button>
    </el-col>
  </el-row>
  <!--表格信息-->
    <el-table v-loading="loading" class="margin-bt" :data="blogs" style="width: 100%" border stripe>
      <el-table-column prop="id" width="50" align="center"></el-table-column>
      <el-table-column prop="title" label="标题" width="250" align="center">
      </el-table-column>
      <el-table-column prop="name" label="分类" width="100" align="center">
      </el-table-column>
      <el-table-column prop="isTop" label="是否置顶" width="100" align="center" >
        <template #default="scope">
          <span>
            {{scope.row.isTop === true ? '是':'否'}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="scope.row.state" width="70" align="center" >
        <template #default="scope">
            <span>
              {{scope.row.published == true ? '发布':'保存'}}
            </span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" prop="updateDate" width="200" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button size="mini" type="primary" @click="Editor(scope.$index,scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="Delete(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  <!--下面的索引的数字-->
  <div class="countStyle">
    <el-pagination background hide-on-single-page layout="prev,pager,next" v-model:current-page="currentPage" v-model:page-count="pageSize">
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Blogs",
  data() {
    return {
      currentPage: 0,
      pageSize: 0,
      loading: null,
      searchInfo: {
        info: '',
        searchType: '',
      },
      deleteInfo: {
        id: null,
        md5Password: null
      },
      types: [],
      blogs: [],
      rules: {
        info: [
            {required: true,message:'请输入内容',trigger: 'blur'}
        ],
        searchType: [
            {required: true,message:'请输入分类',trigger: 'blur'}
        ]
      }
    }
  },
  watch:{
    currentPage(value){
      this.loading = true;
      this.getBlogs(value)
    }
  },
  mounted() {
    this.loading = true
   this.getBlogs(1);
   axios.get("/admin/noPage/listTypes").then( (res) => {
     this.types = res.data
   })
  },
  methods: {
    getBlogs(currentPage){
      axios.get("/admin/listPages",{params:{currentPage: currentPage,pageSize: 10}}).then( (res) => {
        this.pageSize = res.data.pages
        this.blogs = res.data.records
        this.loading = false
      })
    },
    search(formName) {
      this.$refs[formName].validate((valid) => {
        if ( valid ){
          axios.get("/admin/searchPage",{params:{info: this.searchInfo.info,searchType: this.searchInfo.searchType}}).then( (res) => {
            this.blogs = res.data
            this.pageSize = 1
          })
        }else {
          console.log('error submit')
        }

      })
    },
    addPage: function (){
      this.$router.replace('/login/index/addPage')
    },
    Editor: function (index,row){
      this.$router.push({
        name: 'addPage',
        query: {id: (index,row).id}
      })
    },
    Delete: function (index,row){
      this.$confirm('此操作不可逆，是否继续','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        text: 'warning'
      }).then(() => {
        this.deleteInfo.id = (index,row).id;
        this.deleteInfo.md5Password = localStorage.getItem("password")
        axios.post("/admin/deletePage",this.deleteInfo).then( (res) => {
          if ( res.data === true){
            this.$message.success("删除成功")
            this.blogs.splice(index,1)
          }
          else
            this.$message.error("删除失败")
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped>
.margin-bt{
  margin: 20px 0;
}

</style>